<template>
  <Table
    ref="tableRef"
    :columns="data.columns"
    :handles="data.handles"
    :query="data.query"
    @get-list="getData"
  ></Table>
</template>

<script lang="ts" setup name="interconnectionStationList">
import Table from '@/components/table/index.vue';
import {
  pageQueryCecStation,
  startCecStation,
  stopCecStation,
  checkEquipmentByStationId,
} from '@/service/apis/pile';
import { getCity, bntAuth } from '@/utils/utils';
import {
  STATION_STATUS_USE,
  PILE_EFFECTIVE_STATUS,
} from '@/utils/dictionaries';
import { queryDicByParent } from '@/service/apis/api';

const router = useRouter();

const tableRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

queryDicByParent({
  listDtos: ['stationType', 'construction'],
}).then((res: any) => {
  if (res) {
    console.log('ddd--', res);
    data.columns[4].dic = [...res.stationType];
    data.columns[5].dic = [...res.construction];
  }
});
// 获取省市
getCity().then((res: any) => {
  data.query[5].props.options = [...res];
});

const data = reactive({
  columns: [
    {
      prop: 'stationName',
      label: '电站名称',
    },
    {
      prop: 'address',
      label: '电站地址',
    },
    {
      prop: 'operatorName',
      label: '运营商',
    },
    {
      prop: 'areaCodeName',
      label: '区划',
    },
    {
      prop: 'stationType',
      label: '电站类型',
      dic: [] as any,
      width: 120,
    },
    {
      prop: 'construction',
      label: '建设场所',
    },
    {
      prop: 'openExplain',
      label: '开放时间',
    },
    {
      prop: 'efficient',
      label: '生效状态',
      dic: PILE_EFFECTIVE_STATUS,
      template: (row: any, index: number) => {
        return row.efficient === '2'
          ? `<div">生效中</div>`
          : `<div style="color:#FA3939;">下架</div>`;
      },
    },
    {
      prop: 'updateTime',
      label: '最新同步时间',
      width: 150,
    },
    {
      prop: 'isEnableStart',
      label: '启停状态',
      template: (row: any, index: number) => {
        return row.isEnableStart
          ? `<div style="color:#01C68B;">启用</div>`
          : `<div style="color:#FA3939;">停用</div>`;
      },
    },
  ],
  handles: [
    {
      label: '详情',
      handle: (row: any) => {
        console.log('复制---', row);
        router.push({
          name: 'interconnectionStationDetail',
          query: { id: row.id },
        });
      },
    },
    {
      label: '停用',
      permission: 'interconnectionStationList.use',
      labelFun: (row: any) => {
        return !row.isEnableStart ? '启用' : '停用';
      },
      colorFun: (row: any) => {
        return !row.isEnableStart ? '#01C68B' : '#FA3939';
      },
      handle: (row: any) => {
        stationUse(row);
      },
    },
  ],
  query: [
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
    {
      label: '归属运营商',
      prop: 'operatorName',
      comName: 'input',
      props: {
        placeholder: '请输入归属运营商',
      },
    },
    {
      label: '启停状态',
      prop: 'isEnableStart',
      comName: 'select',
      props: {
        placeholder: '请选择启停状态',
        options: STATION_STATUS_USE,
      },
    },
    {
      label: '生效状态',
      prop: 'efficient',
      comName: 'select',
      props: {
        placeholder: '请选择生效状态',
        options: PILE_EFFECTIVE_STATUS,
      },
    },
    {
      label: '电站地址',
      prop: 'address',
      comName: 'input',
      props: {
        placeholder: '请输入电站地址',
      },
    },
    {
      label: '电站城市',
      prop: 'citys',
      comName: 'cascader',
      props: {
        placeholder: '请选择电站城市',
        options: [] as any,
      },
    },
    {
      label: '最近同步时间',
      prop: 'time',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
  ],
});

const getData = (page: any, search: any) => {
  const form = search.ruleForm;
  delete form.provinceCode;
  delete form.cityCode;
  delete form.startTime;
  delete form.endTime;
  if (form.citys?.length === 1) {
    form.provinceCode = form.citys[0];
  }
  if (form.citys?.length === 2) {
    form.provinceCode = form.citys[0];
    form.cityCode = form.citys[1];
  }
  if (form.time) {
    form.startTime = form.time[0];
    form.endTime = form.time[1];
  }
  pageQueryCecStation(form, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableRef.value?.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

// 启用/停用
const stationUse = (row: any) => {
  const msg = !row.isEnableStart
    ? '是否启用该电站及电站内所有电桩？'
    : '是否停用该电站及电站内所有电桩？';
  ElMessageBox.confirm(msg, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    if (row.isEnableStart) {
      stopCecStation({
        id: row.id,
      }).then((res: any) => {
        row.isEnableStart = !row.isEnableStart;
      });
    } else {
      startCecStation({
        id: row.id,
      }).then((res: any) => {
        row.isEnableStart = !row.isEnableStart;
      });
    }
  });
};
</script>